<%--
  Created by IntelliJ IDEA.
  User: MAX
  Date: 2021-01-04
  Time: 17:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>供应商分类管理</title>
    <base href="<%=request.getContextPath()%>/"/>
    <link rel="stylesheet" href="webjars/layui/2.5.6/css/layui.css">
</head>
<body>

<%-- 模糊查询--%>
<form class="layui-form" lay-filter="search" style="width: 1140px; margin: 0 auto">
    <div class="layui-form-item layui-inline">
        <label class="layui-form-label">分类编号:</label>
        <div class="layui-input-inline">
            <input type="text" name="supclaId" class="layui-input" id="supclaId">
        </div>
    </div>

    <div class="layui-form-item layui-inline">
        <label class="layui-form-label">状态:</label>
        <div class="layui-input-inline">
            <select name="supclaFlag" lay-filter="youwugongyingshang" lay-verify="">
                <option value="All">请选择</option>
                <option value="Y">有供应商</option>
                <option value="N">无供应商</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item layui-inline">
        <button type="button" class="layui-btn layui-btn-normal" onclick="create();">添加分类</button>
    </div>
</form>





<%-- 数据表格--%>
    <div class="layui-container">

        <table id="supclaTb" lay-filter="supclaTb"></table>

        <script type="text/html" id="action">
            <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i></a>
        </script>
    </div>


<%-- 修改--%>
<div style="display: none"  id="update">
    <form class="layui-form" lay-filter="update">

        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">分类名称:</label>
            <div class="layui-input-inline">
                <input type="text" name="supclaName" class="layui-input" >
            </div>
        </div>

        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">分类描述:</label>
            <div class="layui-input-inline">
                <input type="text" name="supclaDescription" class="layui-input" >
            </div>
        </div>

    </form>
</div>


<%-- 添加--%>
<div style="display: none"  id="create">
    <form class="layui-form" lay-filter="create">
        <input type="reset" style="display: none" id="restAdd" />
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">分类名称:</label>
            <div class="layui-input-inline">
                <input type="text" name="supclaName" class="layui-input" >
            </div>
        </div>

        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">分类描述:</label>
            <div class="layui-input-inline">
                <input type="text" name="supclaDescription" class="layui-input" >
            </div>
        </div>

    </form>
</div>


<script src="webjars/layui/2.5.6/layui.js"></script>
<script>
    layui.use(["table","form","jquery"],function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.$;
        let params = layui.form.val("search");
        table.render({
            id    : "supclaTb",
            elem  : "#supclaTb",
            where : params,
            url   : "supcla/getSupcla",
            cols  : [[
                {title: "分类编号", field: "supclaId"},
                {title: "分类名称", field: "supclaName"},
                {title: "分类描述", field: "supclaDescription"},
                {title: "分类状态", field: "supclaFlag"},
                {title: "操作", toolbar: "#action"}
            ]],
            page: true
        })

        //文本框事件监听
        $("#supclaId").on("input",function(e){
            //console.log(e.delegateTarget.value);
            let params = form.val("search");
            layui.table.reload('supclaTb',{
                where : params
            });
        });

        //下拉框事件监听
        form.on('select(youwugongyingshang)', function(data){
            // console.log(data.elem); //得到select原始DOM对象
            //console.log(data.value); //得到被选中的值
            // console.log(data.othis); //得到美化后的DOM对象
            let params = form.val("search");
            layui.table.reload('supclaTb',{
                where : params
            });
        });

        table.on("tool(supclaTb)",function ({data,event}) {
            switch (event) {
                case "edit" :
                    update(data);
                    break;
                case "del" :
                    del(data);
                    break;
            }
        });
    });




    function update(data) {

        layui.use(["layer","jquery","form","table"],function () {
            let layer = layui.layer;
            let $ = layui.$;
            let table = layui.table;
            console.log(data);
            layui.form.val("update",data);
            layer.open({
                type : 1,
                content : $("#update"),
                btn : ["确定","取消"],
                yes(){
                    let params = layui.form.val("update");
                    console.log(params);
                    $.post("supcla/updateSupcla",{'supclaId':data.supclaId,'supclaName':params.supclaName,'supclaDescription':params.supclaDescription})
                        .done(({msg})=>{
                            layui.table.reload("supclaTb");
                            layer.close(layer.index);
                            layer.msg(msg);
                        });
                }
            });
        })
    }


    function del(data) {

        layui.use(["layer","jquery","form","table"],function () {
            let layer = layui.layer;
            let $ = layui.$;
            let table = layui.table;
            //console.log(data);
            layer.confirm('您确定要删除这条数据吗？', {
                btn: ['确定','取消'] //按钮
            }, function(){

                $.post({
                    url: "supcla/deleteSupcla",
                    data: {
                        'supclaId':data.supclaId
                    },
                    success : function(result){
                        layui.table.reload("supclaTb");
                        //layer.close(layer.index);
                        layer.msg(result.msg);
                    }
                });
            });


        })
    }

    function create() {
        layui.use(["layer","jquery","form","table"],function () {
            let layer = layui.layer;
            let $ = layui.$;
            let table = layui.table;
            layer.open({
                type : 1,
                content : $("#create"),
                btn : ["确定","返回"],
                yes(){
                    let params = layui.form.val("create");
                    console.log(params);
                    $.post("supcla/createSupcla", params)
                        .done(({msg}) => {
                            layui.table.reload("supclaTb");
                            layer.close(layer.index);
                            layer.msg(msg);
                        });
                    $("#restAdd").click();
                }
            });
        });
    }

    
</script>
</body>
</html>
